<template>
  <OperationSearch
    @search-page="searchPage"
    :paramForm="paramForm"
    advance-search
    prop="name"
  >
    <el-form :model="paramForm" label-width="120px">
      <el-form-item label="产品类型">
        <el-select v-model="paramForm.type" placeholder="请选择">
          <el-option
            v-for="item in dictsMap.type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="paramForm.certificationStatus" placeholder="请选择">
          <el-option
            v-for="item in dictsMap.certificationStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchPage(paramForm)">搜索</el-button>
        <el-button @click="clearSearchParam">清空</el-button>
      </el-form-item>
    </el-form>
  </OperationSearch>
</template>

<script>
import { initSearchForm } from './options'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['dictObject', 'dictMaps']),
    dictsMap () {
      return {
        type: this.dictMaps['product_type'],
        certificationStatus: this.dictMaps['examine_status']
      }
    }
  },
  data () {
    return {
      paramForm: initSearchForm()
    }
  },
  methods: {
    searchPage (val) {
      const obj = val || this.paramForm
      this.$emit('searchPage', obj)
    },
    clearSearchParam () {
      this.paramForm = initSearchForm()
    }
  },
  created () {}
}
</script>

<style lang="scss" scoped>
.Classes {
  display: flex;
  justify-content: space-between;
  .first,
  .second {
    width: 49%;
  }
}
</style>
